<template>
  <div class="productDetail">
    <div class="buttons">
      <ul>
        <li id="moRen"><a id="moRen" href="#">规格参数</a></li>
        <li><a href="#">商品展示</a></li>
        <li><a href="#">全部评价(999+)</a></li>
        <li><a href="#">商品咨询</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </div>
    <h3 class="titles">
      <span class="iconfont icon-lingxing"> </span> 商品尺码
      <span class="capsEn"> SIZE</span>
    </h3>
    <div class="sizeTable">
      <div class="sizeTable-herd">
        <b>尺码对照表</b>
        <span><span class="iconfont icon-jinggao"></span>温馨提示</span>
      </div>
      <table border="1px" class="sizeTable-table">
        <thead>
          <tr>
            <th>尺码</th>
            <th>欧洲码</th>
            <th>脚长</th>
            <th>英国码</th>
            <th>美国码</th>
          </tr>
        </thead>
        <tbody>
          <tr class="one">
            <td>39</td>
            <td>39</td>
            <td>245</td>
            <td>6</td>
            <td>6.5</td>
          </tr>
          <tr class="one">
            <td>40</td>
            <td>40</td>
            <td>250</td>
            <td>6.5</td>
            <td>7</td>
          </tr>
          <tr class="one">
            <td>40.5</td>
            <td>40.5</td>
            <td>250</td>
            <td>6.5</td>
            <td>7.5</td>
          </tr>
          <tr class="one">
            <td>41</td>
            <td>41</td>
            <td>255</td>
            <td>7</td>
            <td>8</td>
          </tr>
          <tr class="one">
            <td>42</td>
            <td>42</td>
            <td>260</td>
            <td>7.5</td>
            <td>8.5</td>
          </tr>
          <tr class="tiShi">
            <td colspan="5">
              <span>&nbsp;&nbsp;&nbsp;&nbsp;温馨提示:</span
              >由于是人工测量存在1.5-2cm内的误差.
            </td>
          </tr>
          <tr>
            <td colspan="5">
              查看更多<span class="iconfont icon-jiantouxia"></span>
            </td>
            <!-- <td colspan="5">
              收起<span class="iconfont icon-jiantouxia"></span>
            </td> -->
          </tr>
        </tbody>
      </table>
    </div>
    <h3 class="titles">
      <span class="iconfont icon-lingxing"> </span> 商品参数
      <span class="capsEn"> DETAIL</span>
    </h3>
    <table class="dc-table fst" border="1px">
      <tbody class="J_dc_table">
        <tr>
          <th class="dc-table-tit">适用人群:</th>
          <td>青少年,青年</td>
          <th class="dc-table-tit">功能：</th>
          <td>透气,轻便</td>
        </tr>
        <tr>
          <th class="dc-table-tit">适用人群:</th>
          <td>青少年,青年</td>
          <th class="dc-table-tit">功能：</th>
          <td>透气,轻便</td>
        </tr>
        <tr>
          <th class="dc-table-tit">适用人群:</th>
          <td>青少年,青年</td>
          <th class="dc-table-tit">功能：</th>
          <td>透气,轻便</td>
        </tr>
        <tr>
          <th class="dc-table-tit">适用人群:</th>
          <td>青少年,青年</td>
          <th class="dc-table-tit">功能：</th>
          <td>透气,轻便</td>
        </tr>
        <tr class="bottomTr">
          <td colspan="4">
            查看更多<span class="iconfont icon-jiantouxia"></span>
          </td>
          <!-- <td colspan="5">
              收起<span class="iconfont icon-jiantouxia"></span>
            </td> -->
        </tr>
      </tbody>
    </table>
    <h3 class="titles">
      <span class="iconfont icon-lingxing"> </span> 商品展示
      <span class="capsEn"> IMAGE</span>
    </h3>
    <div class="countImage">
      <img
        src="//a.vpimg3.com/upload/brandcool/0/2021/04/14/37/f5fc9b4d-1b56-49b9-9e8a-09ed89f44b0a.jpg"
        alt=""
      />
      <img
        src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/07/30/46/a82b89c2-9aa8-4b41-aa66-e6365ea795e1.jpg"
        alt=""
      />
      <img
        src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/07/30/4/2ffb94d9-d117-45e1-92e4-fe35f92e73f1.jpg"
        alt=""
      />
      <img
        src="//h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2022/07/30/156/2e5e0a76-b94f-49a8-90c5-c9f4c47530be.jpg"
        alt=""
      />
      <img
        src="//h2.appsimg.com/a.appsimg.com/upload/category/2020/09/25/130/4e4814f4-7bcf-4a95-a07f-624f467a71a1.jpg"
        alt=""
      />
      <img
        src="//h2.appsimg.com/b.appsimg.com/upload/mst/2021/05/07/24/62b678c894ab0a535df08dbeb1b08c85.png"
        alt=""
      />
    </div>
    <div class="allEvaluate">
      <div class="evaluateBox">
        <p id="ppp">全部评价</p>
        <div class="evaluateBoxBottom">
          <div class="evaluateBoxBottomTow">
            <div class="evaluateBox-left">
              <p class="maxCount">98.5%</p>
              <p>的用户对商品的评价</p>
            </div>
            <div class="mixBox">
              <p>89%人认为尺码合适</p>
              <div class="countBox">
                <a href="#" class="btn" id="btn">全部按默认排序</a>
                <a href="#" class="btn">全部按默认排序</a>
                <a href="#" class="btn">全部按默认排序</a>
                <a href="#" class="btn">按默认排序</a>
                <a href="#" class="btn">全部按默认排序</a>
                <a href="#" class="btn">全部按默认排序</a>
                <a href="#" class="btn">全部按默认排序</a>
                <a href="#" class="btn">按默认排序</a>
                <a href="#" class="btn">全部按默认排序</a>
                <a href="#" class="btn">全部按默认排序</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="evaluateList">
        <div class="evaluateData">
          <div class="leftBox">
            <img
              src="//h2.appsimg.com/b.appsimg.com/upload/mst/2021/05/20/135/d1c5221e5e9aeaec06156d33aef38d3a.png"
              alt=""
            />
            <div class="left-box-left">
              <span class="userId">XXXXX</span><br />
              <span>金卡会员</span>
            </div>
          </div>
          <div class="rightBox">
            <p>2022-05-05 17:20:09颜色：黑/大学红-3 尺码：41</p>
            <p>尺码标准，版型好看，穿起来很舒服，透气，很棒</p>
            <div>
              <img
                src="//h2.appsimg.com/g.vpimg1.com/upload/ugc/p/55/2022/05/05/5/95543806cb9347d04e959.8781.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="evaluateData">
          <div class="leftBox">
            <img
              src="//h2.appsimg.com/b.appsimg.com/upload/mst/2021/05/20/135/d1c5221e5e9aeaec06156d33aef38d3a.png"
              alt=""
            />
            <div class="left-box-left">
              <span class="userId">XXXXX</span><br />
              <span>金卡会员</span>
            </div>
          </div>
          <div class="rightBox">
            <p>2022-05-05 17:20:09颜色：黑/大学红-3 尺码：41</p>
            <p>尺码标准，版型好看，穿起来很舒服，透气，很棒</p>
            <div>
              <img
                src="//h2.appsimg.com/g.vpimg1.com/upload/ugc/p/55/2022/05/05/5/95543806cb9347d04e959.8781.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="evaluateData">
          <div class="leftBox">
            <img
              src="//h2.appsimg.com/b.appsimg.com/upload/mst/2021/05/20/135/d1c5221e5e9aeaec06156d33aef38d3a.png"
              alt=""
            />
            <div class="left-box-left">
              <span class="userId">XXXXX</span><br />
              <span>金卡会员</span>
            </div>
          </div>
          <div class="rightBox">
            <p>2022-05-05 17:20:09颜色：黑/大学红-3 尺码：41</p>
            <p>尺码标准，版型好看，穿起来很舒服，透气，很棒</p>
            <div>
              <img
                src="//h2.appsimg.com/g.vpimg1.com/upload/ugc/p/55/2022/05/05/5/95543806cb9347d04e959.8781.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "ProductDetail",
}
</script>

<style lang="less" scoped>
.productDetail {
  text-align: center;
  // border: 1px solid red;
  .buttons {
    width: 100%;
    // border: 1px solid black;
    ul {
      width: 100%;
      border: 1px solid #ccc;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      display: flex;
      height: 36px;
      border-bottom: 3px solid #333;
      box-sizing: border-box;
      li {
        margin: 0;
        padding: 0;
        list-style: none; /*去掉li左侧的点*/
        border-right: 1px solid #ccc;

        a {
          display: block;
          box-sizing: border-box;
          text-decoration: none;
          color: #333;
          padding: 0px 15px;
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          border-bottom: 3px solid #333;
        }
        a:hover {
          color: #f10180;
          border-bottom: 3px solid #f10180;
        }
        #moRen {
          color: #f10180;
          border-bottom: 3px solid #f10180;
        }
      }
    }
  }
  .titles {
    margin: 0;
    text-align: left;
    color: #f10180;
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 3px dotted #ccc;
    .iconfont {
      color: #f10180;
    }
    .capsEn {
      color: #ccc;
    }
  }
  .sizeTable {
    .sizeTable-herd {
      display: flex;
      justify-content: space-between;
      .icon-jinggao {
        color: #007cff;
      }
    }
    .sizeTable-table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px auto;
      border-collapse: collapse;
      border: 1px solid #b8b8b8;
      tr th {
        height: 28px;
        font-size: 14px;
      }
      tr td {
        height: 32px;
        text-align: center;
        font-size: 14px;
      }
      thead {
        background-color: #f5f5f5;
      }
      .tiShi td {
        text-align: left;
        span {
          color: #f10180;
        }
      }
    }
  }
  .dc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px auto;
    border-collapse: collapse;
    border: 1px solid #b8b8b8;
    tr th {
      width: 15%;
      background-color: #dbdbdb;
      border: none;
      height: 30px;
      text-align: right;
      padding-right: 10px;
    }
    tr td {
      text-align: left;
      padding-left: 10px;
    }
    .bottomTr td {
      text-align: center;
      height: 40px;
    }
  }
  .countImage {
    font-size: 0px;
  }
  .allEvaluate {
    width: 100%;
    // border: 1px solid black;
    .evaluateBox {
      border: 1px solid #ccc;
      #ppp {
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        text-align: left;
        padding-left: 15px;
        background-color: #eae8eb;
        box-sizing: border-box;
        margin: 0px;
        border-bottom: 1px solid #ccc;
      }
    }
    .evaluateBoxBottom {
      background-color: #fafafa;
      .evaluateBoxBottomTow {
        height: 100;
        padding: 30px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .evaluateBox-left {
          border-right: 1px solid #ccc;
          padding-left: 50px;
          padding-right: 30px;
          p {
            margin: 0px;
          }
          .maxCount {
            font-size: 50px;
            color: #f10180;
          }
        }
        .mixBox {
          border-bottom: 1px solid #ccc;
          position: relative;
          p {
            position: absolute;
            font-size: 12px;
            color: #999;
            bottom: -20px;
            left: 50%;
            margin-left: -54px;
            background-color: #fff;
          }
          .countBox {
            display: flex;
            width: 630px;
            padding-bottom: 10px;
            // border: 1px solid green;
            flex-wrap: wrap;
            padding-right: 40px;
            .btn {
              display: block;
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              color: #999;
              border: 1px solid #ccc;
              border-radius: 5px;
              overflow: hidden;
              background-color: #fff;
              text-decoration: none;
              padding: 0 10px;
              margin: 3px 5px;
            }
            #btn {
              background-color: #f10180;
              color: #fff;
            }
          }
        }
      }
    }
    .evaluateList {
      width: 100%;

      // border: 1px solid black;
      .evaluateData {
        height: 200px;
        border-bottom: 1px solid #ccc;

        // border: 1px solid blue;
        display: flex;
        .leftBox {
          width: 200px;
          height: 40px;
          // border: 1px solid red;
          display: flex;
          align-items: center;
          padding: 20px 30px;
          img {
            // padding-left: 30px;
            width: 40px;
            height: 40px;
          }
          .left-box-left {
            // border: 1px solid red;
            padding-left: 20px;
            // line-height: 20px;
          }
        }
        .rightBox {
          font-size: 14px;
          color: #999;
          div {
            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
            img {
              width: 78px;
              height: 78px;
            }
          }
        }
      }
    }
  }
}
</style>
